@mixin popupRenderer() {
  .esri-popup-renderer__media,
  .esri-popup-renderer__attachments,
  .esri-popup-renderer__media-container {
    display: flex;
  }
  .esri-popup-renderer__loading-container {
    width: 100%;
    justify-content: center;
    display: flex;
    padding: $cap_spacing 0;
  }

  .esri-icon-loading-indicator {
    display: inline-block;
  }

  .esri-popup-renderer {
    width: 100%;
  }
  // GENERAL
  .esri-popup-renderer h1 {
    font-size: $h1_text_size;
    font-weight: $text_weight_header;
  }
  .esri-popup-renderer h2 {
    font-size: $h2_text_size;
    font-weight: $text_weight_header;
  }
  .esri-popup-renderer img {
    max-width: 100%;
  }
  .esri-popup-renderer figcaption {
    font-size: $caption_text_size;
    font-style: italic;
    padding: 0;
    margin: .2em 0 0;
    display: block;
  }
  .esri-popup-renderer ul {
    margin-bottom: 1rem;
    padding: 0 0 0 1rem;
  }
  .esri-popup-renderer li {
    font-size: $body_text_size;
    margin: .3em 0;
  }
  .esri-popup-renderer__content-element {
    padding: 0 floor($side_spacing/2) $cap_spacing*2;
  }
  .esri-popup-renderer__content-element:last-child {
    padding-bottom: 0;
  }
  .esri-popup-renderer__field-data--date {
    text-transform: capitalize;
  }
  // ATTACHMENTS
  .esri-popup-renderer__attachments-title {
    margin: 0 auto 0 0;
    font-weight: $text_weight_header;
  }
  .esri-popup-renderer__attachments {
    flex-flow: column wrap;
    align-items: flex-start;
  }
  ul.esri-popup-renderer__attachments-items {
    padding: 0 0 0 0;
    margin: floor($cap_spacing/2) 0;
  }
  li.esri-popup-renderer__attachments-item {
    list-style-type: none;
    line-height: 1.2em;
    display: table;
  }
  a.esri-popup-renderer__attachments-item-link {
    text-decoration: none;
    font-size: $body_text_size;
    color: $button_text_color;
    max-width: 100%;
    word-break: break-all;
    display: table-row;
  }
  a.esri-popup-renderer__attachments-item-link:hover {
    color: $button_text_hover_color;
  }
  .esri-popup-renderer__attachments-item-icon,
  .esri-popup-renderer__attachments-item-title {
    display: table-cell;
    padding-top: floor($cap_spacing/4);
    padding-bottom: floor($cap_spacing/4);
    vertical-align: middle;
  }
  .esri-popup-renderer__attachments-item-icon {
    padding-left: floor($side_spacing/2);
    padding-right: floor($side_spacing/2);
  }
  // MEDIA
  .esri-popup-renderer__media {
    flex-flow: row wrap;
    align-items: center;
  }
  .esri-popup-renderer__media-summary {
    flex-flow: row nowrap;
    align-items: center;
    display: none;
    margin: 0 floor($side_spacing/2) 0 auto;
    padding: 0;
  }
  .esri-popup-renderer__media-count {
    padding: 0 .2rem;
  }
  .esri-popup-renderer__media-image-summary {
    list-style-type: none;
    display: inline-block;
    vertical-align: text-bottom;
    padding: 0 0 0 .7rem;
  }
  .esri-popup-renderer__media-item-title {
    font-size: $h2_text_size;
    padding: 0.3rem 0 0;
  }
  .esri-popup-renderer__media-item-caption {
    font-size: $body_text_size;
    padding: 0.1rem 0 0;
  }
  .esri-popup-renderer__media-container {
    flex-flow: row nowrap;
    align-items: stretch;
    justify-content: center;
    width: 100%;
    min-height: 150px;
    margin-top: floor($cap_spacing/2);
  }
  .esri-popup-renderer__media-container .esri-popup-renderer__button {
    justify-content: center;
    align-items: center;
    flex: 0 1 15%;
    font-size: 20px;
    color: $button_text_color;
    display: none;
  }
  .esri-popup-renderer__media-container .esri-popup-renderer__button:hover {
    cursor: pointer;
    color: $button_text_hover_color;
  }
  .esri-popup-renderer__media-item {
    max-width: 100%;
    height: auto;
    display: flex;
    align-items: flex-start;
    justify-content: center;
  }
  .esri-popup-renderer__media-chart {
    //  Dimensions on containing div are required
    //  for Chart library to know how big to make the chart.
    width: 250px;
    height: 250px;
  }
  .esri-popup-renderer__media-previous-icon--rtl,
  .esri-popup-renderer__media-next-icon--rtl {
    display: none;
  }
  // MULTIPLE MEDIA
  .esri-popup-renderer--media-pagination-visible .esri-popup-renderer__media-container .esri-popup-renderer__button {
      display: flex;
  }
  .esri-popup-renderer--media-pagination-visible .esri-popup-renderer__media-item-container {
    flex: 0 0 70%;
  }
  .esri-popup-renderer--media-pagination-visible .esri-popup-renderer__media-summary {
    display: flex;
  }
  .esri-popup-renderer--media-pagination-visible .esri-popup-renderer__media-chart {
    //  Accounts for media items being smaller
    //  when there are pagination buttons.
    width: 225px;
    height: 225px;
  }
  //  SCREEN SIZES
  .esri-view-width-xlarge {
    @include mediaImgMaxWidth(380);
  }

  .esri-view-width-large {
    @include mediaImgMaxWidth(280);
  }

  .esri-view-width-medium {
    @include mediaImgMaxWidth(240);
  }

  .esri-view-width-small {
    @include mediaImgMaxWidth(225);
  }

  .esri-view-width-xsmall {
    @include mediaImgMaxWidth(180);
  }

  .esri-view-width-xsmall .esri-docked {
    @include mediaImgMaxWidth(300);
  }
  //  RTL
  html[dir="rtl"] {
    .esri-popup-renderer__attachments-title {
      margin: 0 0 0 auto;
    }
    .esri-popup-renderer__attachments-item-icon {
      padding: 0 0 0 .5em;
    }
    .esri-popup-renderer__media-summary {
      margin: 0 auto 0 0;
    }
    .esri-popup-renderer__media-image-summary {
      margin: 0 .5em 0 0;
    }
    .esri-popup-renderer__media-previous-icon--rtl,
    .esri-popup-renderer__media-next-icon--rtl {
      display: inline-block;
    }
    .esri-popup-renderer__media-previous-icon,
    .esri-popup-renderer__media-next-icon {
      display: none;
    }
  }
}

@if $include_PopupRenderer == true {
  @include popupRenderer();
}
